<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/common/meta.jsp"%>
<title>汪星客 - 个人中心 - 服务日历管理</title>
</head>
<body>
	<div class="wrap">
		<div class="header_bg">
			<%@ include file="/common/header.jsp"%>
	    </div>
	    <div class="w">
	    	<div class="path box">
	    		<jsp:include page="/common/frame/frame_path.jsp">
            		<jsp:param name="current" value="服务日历管理"/>
            	</jsp:include>
	        </div>
	    </div>
	    <div class="main">
	    	<div class="list box">
	        	<div class="pc_left">
            	<jsp:include page="/common/frame/frame_left.jsp">
            		<jsp:param name="checked" value="sevDate"/>
            	</jsp:include>
            	</div>
	            <div class="pc_right">
	                <h3>点击设置你的日历状态</h3>
	                <div class="pc-year">
	                	<span class="up" onclick="tools.href('${ctx}/frame/sevDate.do?date=<fmt:formatDate value="${back}" type="date" pattern="yyyy-MM"/>')"></span>
	                    <span class="down" onclick="tools.href('${ctx}/frame/sevDate.do?date=<fmt:formatDate value="${next}" type="date" pattern="yyyy-MM"/>')"></span>
	                    <fmt:formatDate value="${searchDate}" type="date" pattern="yyyy年MM月"/>
	                </div>
	                <table class="calendar" width="710" cellpadding="0" cellspacing="0" bgcolor="#fff">
	                	<tr>
							<th class="red">星期日</th>
	                        <th>星期一</th>
	                        <th>星期二</th>
	                        <th>星期三</th>
	                        <th>星期四</th>
	                        <th>星期五</th>
	                        <th class="red">星期六</th>                    	
	                    </tr>
	                    <c:forEach items="${calendar}" var="week">
	                    	<tr>
	                    	<c:forEach items="${week}" var="day">
	                    		<td title="<fmt:formatDate value="${day}" type="date" pattern="yyyy-MM-dd"/>">
	                    			<span class="day">
	                    				<fmt:formatDate value="${day}" type="date" pattern="d"/>
	                    			</span>
	                    		</td>
	                    	</c:forEach>
	                    	</tr>
	                    </c:forEach>
	                </table>
	            </div>
	            <div class="clear"></div>
			</div>
	    </div>
	    <div class="footer_bg">
	    	<%@ include file="/common/footer.jsp"%>
	    </div>
	</div>
</body>
<script type="text/javascript">
var searchDate = "<fmt:formatDate value="${searchDate}" type="date" pattern="yyyy-MM"/>";
var today = "<fmt:formatDate value="${today}" type="date" pattern="yyyy-MM-dd"/>";
$(function(){
	$(".calendar td[title^='" + searchDate + "']").css("cursor", "pointer")
	.each(function(){
		setDayStatus(searchDate, "open");
	})
	.append("<br /><br /><div name='info'>接受代养服务</div>")
	.find("span").css("color", "#FFFFFF");
	
	//获取已经禁用的日期
	$.getJSON("${ctx}/sevdate/host.do?date=" + searchDate + "-01", function(res){
		for(var i=0;i<res.length;i++) {
			var sevDate = res[i];
			var beginDate = new Date(sevDate.disableBegan);
			var endDate = new Date(sevDate.disableEnd);
			while(beginDate <= endDate) {
				setDayStatus(beginDate.format("yyyy-MM-dd"), "close");
				beginDate.setDate(beginDate.getDate() + 1);
			}			
		}
	});
});

function openServer(dateStr) {
	$.getJSON("${ctx}/sevdate/open.do?date=" + dateStr, function(res){
		setDayStatus(dateStr, "open");
	});
}

function closeServer(dateStr) {
	$.getJSON("${ctx}/sevdate/close.do?date=" + dateStr, function(res){
		setDayStatus(dateStr, "close");
	});
}

function setDayStatus(dateStr, status) {
	$(".calendar td[title^='" + dateStr + "']")
	.attr("status", status)
	.unbind("click")
	.removeClass("org")
	.removeClass("blue").each(function(){
		if(status == "open") {
			$(this).addClass("blue").click(function() {
				closeServer(this.title);
			}).find(">div[name='info']").html("接受代养服务");
		} else if(status == "close") {
			$(this).addClass("org").click(function() {
				openServer(this.title);
			}).find(">div[name='info']").html("不接受代养服务");;
		}
	});
}
</script>
</html>